﻿@model TelerikConnect.Web.ViewModels.UserProfileViewModel

@{
    ViewBag.Title = Model.FirstName + " " + Model.LastName;
}
<div class="content-wrapper">
    <h1>@string.Format("{0} {1}", Model.FirstName, Model.LastName)</h1>

    <div id="content-left">
        <img id="avatar" src="@Model.Avatar" alt="@Model.UserName" title="@Model.UserName" />
        @if (Model.UserName.ToLower() == User.Identity.Name.ToLower())
        {
            <p>
                <a href="~/Account/Edit" title="Edit profile" class="k-button">Edit Profile</a>
            </p>
        }
        else
        {
            var follow = Model.Followed ? "Unfollow" : "Follow";

            <span id="follow" class="k-button">@follow @Model.FirstName</span>
        }
    </div>

    <div id="content-right">

        <div>
            <h2>Area of Expertise</h2>
            <p>
                @(Model.AreaOfExpertise == null ? "No info." : Model.AreaOfExpertise)
            </p>
        </div>

        <div>
            <h2>About</h2>
            <p>
                @(Model.About == null ? "No info." : Model.About)
            </p>
        </div>

        <div>
            <h2>Statement</h2>
            <p>
                @(Model.Statement == null ? "No info.": Model.Statement)
            </p>
        </div>

        <h2>Followers</h2>
        <a id="followers-count" href="#">@Model.Followers</a>

        <h2>Post an update</h2>
        @using (Html.BeginForm("PostUpdate", "Updates", FormMethod.Post))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <label for="content">Post an update: </label>
            <input type="text" class="k-input" name="content" />

            <input type="submit" class="k-button" />
        }

        <h2>Skills</h2>
        @if (Model.Skills.Count() != 0)
        {
            <div id="skills">
                <hr />
                @foreach (var skill in Model.Skills)
                {
                    if (skill.UserName != User.Identity.Name)
                    {
                        if (skill.Recommenders.Any(u => u.UserName == User.Identity.Name))
                        {
                    <span data-id="@skill.Id" class="k-button recommend-action-btn">-</span>
                        }
                        else
                        {
                    <span data-id="@skill.Id" class="k-button recommend-action-btn">+</span>
                        }
                    }
                    <span class="k-button">@skill.Name</span>
                    <span class="k-button recommend-btn" id="count-@skill.Id" data-id="@skill.Id">@skill.Recommenders.Count()</span>
                    <hr />
                }
            </div>
        }
        else
        {
            <p>This user has not chosen skills yet.</p>
        }
    </div>
</div>

<script>

    $("#follow").click(function () {
        $.ajax({
            url: 'http://localhost:63654/Account/Follow/' + '@Model.UserName',
            success: function () {
                /// TODO update current values
            },
            error: function (e) {

            }
        })
    });

    $(".recommend-action-btn").click(function () {
        var id = $(this).attr("data-id");
        var action = $(this).html();

        var actionCmd;
        if (action == '+') {
            actionCmd = "Recommend";
            $(this).html("-");
        }
        else {
            actionCmd = "UnRecommend"
            $(this).html("+");
        }

        var count = $("#count-" + id);

        $.ajax({
            url: 'http://localhost:63654/Recommend/' + actionCmd + '/' + id,
            success: function (result) {
                var c = parseInt(count.html());
                c += action == "+" ? 1 : -1;
                count.html(c);
            },
            error: function () {

            }
        });
    });

    $("#followers-count").click(function (e) {
        var kendoWindow = $("#window").data("kendoWindow");
        kendoWindow.center();
        var self = $(this);
        alert();
        $.ajax({
            url: '@Url.Content("~/Account/GetFollowers/")' + '@Model.UserName',

            success: function (result) {
                var dataOutput = "";

                if (result.data.length > 0) {
                    var followers = result.data;
                    for (var i = 0; i < result.data.length; i++) {
                        dataOutput += '<a href="/Account/Profile/' + followers[i] + '" class="k-button">' + followers[i] + '</a>';
                    }
                }
                else {
                    dataOutput = "There are currently no recommender for this skill."
                }

                kendoWindow.content(dataOutput);
            },
            dataType: "json"
        });

        kendoWindow.open();
        e.preventDefault();
    });

    $(".recommend-btn").click(function (e) {
        $("#window").show();
        var id = $(this).attr("data-id");
        var kendoWindow = $("#window").data("kendoWindow");
        kendoWindow.center();
        var self = $(this);

        $.ajax({
            url: '@Url.Content("~/Recommend/Recommenders/")' + id,
            success: function (result) {
                var dataOutput = "";
                if (result.recommenders.length > 0) {
                    var recommenders = result.recommenders;
                    self.html(recommenders.length);
                    for (var i = 0; i < result.recommenders.length; i++) {
                        dataOutput += '<a href="/Account/Profile/' + recommenders[i] + '" class="k-button">' + recommenders[i] + '</a>';
                    }
                }
                else {
                    dataOutput = "There are currently no recommender for this skill."
                }

                kendoWindow.content(dataOutput);
            },
            dataType: "json"
        });

        kendoWindow.open();
        e.preventDefault();
    });
</script>
